<template>
    <div style="padding: 10px">
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="score_left">
                    <el-row style="margin-bottom: 10px">
                        <el-col>
                            <el-descriptions class="margin-top" :title="goExam.name" :column="1" size="mini" border>
                                <el-descriptions-item label="日期">{{ goExam.date }}</el-descriptions-item>
                                <el-descriptions-item label="时间">{{ goExam.timeRange[0] }} ~ {{ goExam.timeRange[1] }}</el-descriptions-item>
                                <el-descriptions-item label="科室">{{ goExam.deptName }}</el-descriptions-item>
                                <el-descriptions-item label="考官">{{ teacherNames }}</el-descriptions-item>
                                <el-descriptions-item label="技能">{{ skillName }}</el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-bottom: 10px" type="flex" justify="space-between">
                        <el-col :span="8">
                            <span style="color: #303133;line-height: 28px">考站：</span>
                        </el-col>
                        <el-col :span="18">
                            <el-select v-model="goExamPlaceId" placeholder="请选择考场" style="width: 100%" size="mini">
                                <el-option v-for="item in selectGoExamPlaceList" :key="item.id" :label="item.placeName" :value="item.id"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-table :data="userIdList" size="mini" :max-height="tableHeight" :row-class-name="tableRowClassName" @row-click="handleChoiceStudent">
                                <el-table-column prop="id" label="学员" align="center">
                                    <template slot-scope="scope">
                                        {{userMap[scope.row]}}
                                    </template>
                                </el-table-column>
<!--                                <el-table-column label="打分" align="center">-->
<!--                                    <template slot-scope="scope">-->
<!--                                        <el-button size="mini" type="primary" icon="el-icon-s-promotion" plain circle @click="handleChoiceStudent(scope.row)"/>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
                            </el-table>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="19"><!-- 评分表 -->
                <div class="score_right" v-loading="mark_loading">
                    <el-tabs v-model="sheetAction">
                        <el-tab-pane v-for="sheetId in sheetIdList" :label="sheetNameFormat(sheetId)" :name="sheetId+''"></el-tab-pane>
                    </el-tabs>
                    <MARK v-if="studentId" :go-mark="goScoreMark" :sheet="sheet" @save="handleSaveMark"/>
                    <el-empty v-else :image-size="200" description="请选择学员"></el-empty>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getGo_score_ex_exam_score, updateGo_score_ex_exam_score} from "@/api/go_score/go_score_ex_exam_mark";
import {getGo_score_exam_all} from "@/api/go_score/go_score_exam";
import MARK from "./mark"

export default {
    name: "Go_score_ex_exam_score",
    components: {MARK},
    data() {
        return {
            tableHeight: '350',
            loading: false,
            go_examId: null,
            goExam: {//当前考试
                timeRange:[],
            },
            goScoreExamPlaceList: [],//考试考场编号
            placeMap: {},//场地集合
            goExamPlaceId: null,//选择的考场编号
            selectGoExamPlaceList: [],//考场下拉框列表
            userMap: {},//用户集合
            userIdList: [],//学员列表
            studentId: null,//当前学员
            teacherNames: null,//考官名称
            skillName: null,//技能名称
            skillMap: {},//技能集合
            sheetMap: {},//评分表集合
            sheetIdList: [],//评分表列表
            sheetAction: null,//评分表选项卡
            sheetId: null,//当前评分表
            sheet: {},
            goScoreMark: {},
            mark_loading: false,
        };
    },
    created() {
        this.go_examId = this.$route.params.go_examId;
        this.getGoScoreExam();
        this.resizePage();
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.resizePage();
            })();
        };
    },
    watch: {
        goExamPlaceId: {
            handler(newVal, oldVal) {
                for (let i = 0; i < this.goScoreExamPlaceList.length; i++) {
                    let place = this.goScoreExamPlaceList[i];
                    if (newVal === place.id){
                        this.userIdList = place.studentIdList;
                        this.studentId = null;
                        this.sheetIdList = place.sheetIds;
                        this.sheetAction = place.sheetIds[0]+'';
                        this.skillName = this.skillMap[place.skillId];
                        this.teacherNames = place.teacherIds.map(id=>{return this.userMap[id]}).join('、')
                        break;
                    }
                }
            },
            // 开启深度监听
            deep: true
        },
        sheetAction: {
            handler(newVal, oldVal) {
                this.sheetId = newVal;
                this.handleChoiceStudent(this.studentId);
            },
            // 开启深度监听
            deep: true
        }
    },
    methods: {
        resizePage(){
            let de = document.documentElement;
            let width = de.clientWidth;
            let height = de.clientHeight;
            this.w = width;
            this.h = height;
            this.tableHeight = parseInt(height / 2.2) + '';
        },
        getGoScoreExam(){
            this.loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
            this.selectGoExamPlaceList = [];
            getGo_score_exam_all(this.go_examId).then(response=>{
                this.goExam = response.data;
                this.goScoreExamPlaceList = response.data.goScoreExamPlaceList;
                this.userMap = response.userMap;
                this.skillMap = response.skillMap;
                this.sheetMap = response.sheetMap;
                let i = 0;
                this.selectGoExamPlaceList = response.data.goScoreExamPlaceList.map(o => {
                    i++;
                    return {id: o.id, name: `考场${i}`,placeName: response.placeMap[o.placeId]}
                });
                this.goExamPlaceId = this.selectGoExamPlaceList[0].id;
                this.loading.close();
            })
        },
        giveStudentMark(mark){
            this.goScoreMark = mark;
            this.sheet = mark.scoreSheet;
        },
        /** 选择学员 */
        handleChoiceStudent(studentId){
            if (!studentId){
                return
            }
            this.mark_loading = true;
            this.studentId = studentId;
            this.goScoreMark = {
                examId: this.go_examId,
                examPlaceId: this.goExamPlaceId,
                examStudentId: studentId,
                sheetId: this.sheetId
            }
            getGo_score_ex_exam_score({
                examId: this.go_examId,
                examPlaceId: this.goExamPlaceId,
                examStudentId: studentId,
                sheetId: this.sheetId
            }).then(response=>{
                this.giveStudentMark(response.data);
                this.mark_loading = false;
            })
        },
        /** 保存成绩 */
        handleSaveMark() {
            this.mark_loading = true;
            updateGo_score_ex_exam_score(this.goScoreMark).then(response=>{
                this.$modal.msgSuccess("提交成功");
                this.giveStudentMark(response.data);
                this.mark_loading = false;
            })
        },
        tableRowClassName({row, rowIndex}){
            if (row === this.studentId) {
                return 'warning-row';
            }
        },
        sheetNameFormat(sheetId){
            return this.sheetMap[sheetId];
        },
    }
};
</script>
<style scoped>
/deep/.el-table .warning-row{
    background: oldlace;
}
.score_left{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    padding: 5px;
}

.score_right{
    width: 100%;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
